<template>
  <div class="container" style="margin-top: 160px; margin-bottom: 80px;">
    <el-row>
      <el-col
        :span="24"
        style="height: 50px; line-height: 50px; background-color: #cbe5cd; border-radius: 15px 15px 0 0 ;"
      >
        <span style="font-weight: bold; margin-left: 30px;">支付订单</span>
      </el-col>
      <el-col
        :span="24"
        style="height: auto; background-color: #cbe5cd; width: 100%;"
      >
        <div
          style="width: 550px; height: 100px; margin: 70px auto;border-radius: 40px; "
        >
          <h2 style="text-align: center; padding: 30px;">请尽快支付哟~</h2>
        </div>
        <el-row>
          <el-col :span="24" style="background-color: #cbe5cd;">
            <h4
              style="margin-top: 5px; font-weight: bold; margin-left: 30px;width: 160px;"
            >
              支付方法
            </h4>
            <div style="display: flex;">
              <div class="pay_photo">
                <img src="http://xmall.exrick.cn/static/images/alipay@2x.png" />
              </div>
              <div class="pay_photo">
                <img
                  src="http://xmall.exrick.cn/static/images/weixinpay@2x.png"
                />
              </div>
              <div class="pay_photo">
                <img src="http://xmall.exrick.cn/static/images/qqpay.png" />
              </div>
            </div>
          </el-col>
          <el-col
            :span="24"
            style="background-color: #cbe5cd; border-top: #f5f5f5 solid 1px;"
          >
            <el-button
              type="primary"
              @click="payMoney"
              style="float: right; margin: 20px;"
              >立即支付</el-button
            >
            <span
              style="float: right;display: flex; margin-top: 20px; margin-right: 30px;"
              ><h4 style="width: 120px; ">订单总价:</h4>
              <h5 style="margin-top: 5px;font-weight: bold; color: red;">
                ￥{{ total }}
              </h5>
            </span>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
    <el-row
      style="margin-top: 80px;background-color: rgba(41, 39, 39, 0.46);"
      v-for="item in infoList"
    >
      <el-col :span="24">
        <h4
          style="font-size: 20px; font-weight: bold; padding: 20px; border-top: #cbe5cd solid 1px;"
        >
          收货信息
        </h4>
      </el-col>
      <el-row v-for="item1 in item.address" style="padding: 5px;">
        <el-col :span="8"> 姓名: {{ item1.name }}</el-col>
        <el-col :span="8">联系电话: {{ item1.tel }}</el-col>
        <el-col :span="8">详细地址: {{ item1.address }}</el-col>
      </el-row>
      <el-col :span="24" style="margin: 20px 0 0 0;">
        <el-row>
          <el-col :span="12"
            ><h4
              style="font-size: 20px; font-weight: bold; padding: 20px; border-top: #cbe5cd solid 1px;"
            >
              商品信息
            </h4></el-col
          >
          <el-col :span="4"
            ><h4
              style="font-size: 20px; font-weight: bold; padding: 20px; border-top: #cbe5cd solid 1px;"
            >
              单价
            </h4></el-col
          >
          <el-col :span="4"
            ><h4
              style="font-size: 20px; font-weight: bold; padding: 20px; border-top: #cbe5cd solid 1px;"
            >
              数量
            </h4></el-col
          >
          <el-col :span="4"
            ><h4
              style="font-size: 20px; font-weight: bold; padding: 20px; border-top: #cbe5cd solid 1px;"
            >
              小计
            </h4></el-col
          >
          <el-row v-for="item2 in item.orderDetails" style="padding: 10px;">
            <el-col :span="12">{{ item2.item_title }}</el-col>
            <el-col :span="4"
              ><span style="margin-left: 30px;">{{
                item2.item_price
              }}</span></el-col
            >
            <el-col :span="4"
              ><span style="margin-left: 30px;">{{
                item2.item_num
              }}</span></el-col
            >
            <el-col :span="4"
              ><span style="margin-left: 30px;">{{ item2.total }}</span></el-col
            >
          </el-row>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      infoList: [],
      total: "",
      order_code: "",
    };
  },
  mounted() {
    this.order_code = this.$route.query.order_code;
    console.log(this.order_code);
    this.$axios
      .get(
        "http://localhost:8080/mall/orders/findOrderById?order_code=" +
          this.order_code
      )
      .then(
        function(ret) {
          this.infoList = ret.data.message;
          console.log(this.infoList);
          this.total = ret.data.message[0].payment_money;
          // console.log(this.total);
        }.bind(this)
      );
  },
  methods: {
    payMoney() {
      const res2 = this.$axios
        .get("http://localhost:8080/mall/orders/payOrder", {
          params: {
            order_code: this.order_code,
          },
        })
        .then((ret) => {
          if (ret.status == 200) {
            console.log("支付成功!!");
            this.$router.push({ path: "/orderthree" });
          }
        });
    },
  },
};
</script>

<style scoped="scoped" lang="less">
.pay_photo {
  margin-top: 10px;
  margin-left: 40px;
  margin-bottom: 5px;
  width: 175px;
  height: 50px;
  -ms-flex-pack: center;
  justify-content: center;
  border: 1px solid #e5e5e5;
  cursor: pointer;
  // order-radius: 6px;
  // argin-right: 10px;
  background: #fafafa;

  img {
    display: block;
    height: 34px;
    margin: 8px auto;
  }
}
</style>
